<template>
	<div class="base-textarea pt-1 px-2 pb-4 relative bg-bg-3 rounded overflow-hidden">
		<textarea
			ref="textareaRef"
			class="w-full resize-none bg-transparent outline-none placeholder:text-t-3 text-t-1 font-up"
			:value="modelValue"
			:rows="rows"
			:maxlength="maxlength"
			@input="onChange"
			v-bind="$attrs" />
		<div class="absolute bottom-1 right-2 text-right text-t-4 text-sm" :class="lengthClass">
			{{ modelValue.trim().length + '/' + maxlength }}
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

defineProps({
	modelValue: {
		type: String,
		required: true
	},
	rows: {
		type: Number,
		default: 5
	},
	length: {
		type: Number
	},
	maxlength: {
		type: Number,
		default: 256
	},
	lengthClass: {
		type: String,
		default: ''
	}
})

const textareaRef = ref<HTMLTextAreaElement | null>(null)

const emits = defineEmits(['update:modelValue'])

const onChange = (event: any) => {
	emits('update:modelValue', event.target.value)
}

const focus = () => {
	textareaRef.value?.focus()
}

defineExpose({
	focus
})
</script>
